"use client";
import { useState } from "react";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { Button } from "@/components/ui/button";
import Login from "./Login";
import Register from "./Register";

const LoginAndRegisterText = ({
  state,
  changeState,
}: {
  state: boolean;
  changeState: () => void;
}) => {
  return (
    <>
      {state ? "没有账号?" : "已有账号?"}
      <Button variant={"link"} className="h-auto p-0" onClick={changeState}>
        {state ? "去注册" : "去登录"}
      </Button>
    </>
  );
};

const FormCom = () => {
  const [isLogin, setIsLogin] = useState(true);

  const changeState = () => {
    setIsLogin(!isLogin);
  };

  return (
    <Card className="absolute left-1/2 top-1/2 m-auto w-1/4 -translate-x-1/2 -translate-y-1/2">
      <CardHeader>
        <CardTitle>{isLogin ? "登录" : "注册"}</CardTitle>
        {/* <CardDescription>Card Description</CardDescription> */}
      </CardHeader>
      <CardContent>
        {isLogin ? (
          <Login>
            <LoginAndRegisterText state={isLogin} changeState={changeState} />
          </Login>
        ) : (
          <Register>
            <LoginAndRegisterText state={isLogin} changeState={changeState} />
          </Register>
        )}
      </CardContent>
      <CardFooter></CardFooter>
    </Card>
  );
};

export default FormCom;
